import { RootState } from "@/models";
import { CategoryState } from "@/models/category";
import { ProductState, PRODUCT_EFFECT } from "@/models/product";
import { Button, Col, Divider, Form, Input, Row, Select } from "antd";
import React, { ReactElement, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import ProductItem from "./ProductItem";

interface Props {}

export default function Search({}: Props): ReactElement {
  const dispatch = useDispatch();
  const categoryState = useSelector<RootState, CategoryState>(
    (state) => state.category
  );
  const productState = useSelector<RootState, ProductState>(
    (state) => state.product
  );
  // console.log(categoryState);
  const { search } = productState;
  console.log(search);
  useEffect(() => {
    dispatch({
      type: "category/handleGetCategory",
    });
  }, []);
  const onFinish = (value: { categoty: string; search: string }) => {
    console.log(value);
    dispatch({
      type: PRODUCT_EFFECT.handleProductSearch,
      payload: {
        payload: {
          ...value,
        },
      },
    });
  };
  return (
    <>
      <Form
        onFinish={onFinish}
        layout="inline"
        initialValues={{ category: "All" }}
      >
        <Input.Group compact>
          <Form.Item name="category">
            <Select>
              <Select.Option value="All">所有分类</Select.Option>
              {categoryState.category.result.map((item) => (
                <Select.Option key={item._id} value={item._id}>
                  {item.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="search">
            <Input placeholder="请输入搜索关键字"></Input>
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">搜索</Button>
          </Form.Item>
        </Input.Group>
      </Form>
      <Divider />
      <Row gutter={[16, 16]}>
        {search.map((item) => {
          return (
            <Col key={item._id} span="6">
              {<ProductItem product={item} />}
            </Col>
          );
        })}
      </Row>
    </>
  );
}
